<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_r7jO50',
'ZY_ZhiLiangKongZhi_1',
'ZY_ZhiLiangBaoZhang_2',
'ZY_YanFaYuZhiShiChan_3',
'ZY_QuanMianZhiLiangGuanLi_4',
'ZY_XunHuan_5',
'ZY_QuanZhiGuan_6',
'ZY_ZhiLiangKongZhi_7',
'ZY_QuanZhiGuan_8',
'ZY_ZhongZhiJiDi_9',
'ZY_QuanZhiGuan_10',
'img_$WMvc11',
'img_BW51e12',
'img_JgJpg13',
'ZY_ZhiLiangGuanLi_14',
'ZY_QuanMianZhiLiangGuanLi_15',
'img_bzj1a16',
'img_emCPf17',
'img_kLaEN18',
'img_cYEjY19',
'ZY_YanFaYuZhiShiChan_20',
'img_MJZrt21',
'ZY_YanGeDeZhiLiangKong_22',
'img_FG3_623',
'ZY_YanGeDeZhiLiangKong_24'
"  ></cms:ads>
<!doctype html>
<html>
 <head>
  <link rel="icon" sizes="any" href="${浏览器logo}">
  <title>${网页标题}</title>
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/wantai/pc/css/swiper.min.css">
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/wantai/pc/css/animate.css">
  <link rel="stylesheet" href="https://hwfile.csxuncong.com/wantai/pc/css/common.css">
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]--> 
  <style>body{ background: #f7f7f7; } .tab-content p{ font-size: 16px; color: #090909; line-height: 30px; } .em{ font-weight: bold; } .tab-content .img-box{ margin: 20px -15px 0; } .tab-content .img-box .img{ max-width: 100%; padding: 0 15px; } .common-box{ padding: 30px 50px; background: #ffffff; } /* 公司文化 */ .quality{ position: relative; padding: 60px 80px; background: url('https://hwfile.csxuncong.com/wantai/pc/images/home/bg.png') no-repeat; } .quality .title{ color: #ffffff } .quality .swiper-container{ margin: 0 70px; } .quality-wrap{ position: relative; margin: 0 -70px; } .quality .swiper-slide img{ width: 100%; } .quality .swiper-button-prev{ background-image: url(https://hwfile.csxuncong.com/wantai/pc/images/home/prev.png); background-size: contain;; } .quality .swiper-button-next{ background-image: url(https://hwfile.csxuncong.com/wantai/pc/images/home/next.png); background-size: contain;; } .quality .sub-title{ font-size: 18px; color: #ffffff; margin-bottom: 40px; text-align: center; } /* */ .list-item{ margin-bottom: 20px; } .list-item img{ width: 40%; margin-right: 40px; } .list-item p{ font-size: 16px; line-height: 40px; }</style>
  <meta name="keywords" content="${网页关键词}">
  <meta name="description" content="${网页描述 }">
 </head> 
 <body> 
  <jsp:include page="_top.jsp"></jsp:include> 
  <div class="banner"> 
   <img src="${img_r7jO50.adImg}" class="img zy" data-type="ad" data-id="${img_r7jO50.adId}"> 
  </div> 
  <div class="tab"> 
   <div class="container"> 
    <span class="tab-item zy" data-type="ad" data-id="${ZY_ZhiLiangKongZhi_1.adId}">${ZY_ZhiLiangKongZhi_1.adTitle}</span> 
    <span class="tab-item zy" data-type="ad" data-id="${ZY_ZhiLiangBaoZhang_2.adId}">${ZY_ZhiLiangBaoZhang_2.adTitle}</span> 
<%--    <span class="tab-item zy" data-type="ad" data-id="${ZY_YanFaYuZhiShiChan_3.adId}">${ZY_YanFaYuZhiShiChan_3.adTitle}</span> --%>
   </div> 
  </div> 
  <div class="container"> 
   <!-- 质量控制 --> 
   <div class="tab-content hide"> 
    <div class="common-box"> 
     <div class="flex align-center animate__animated animate__fadeInUp"> 
      <h3 class="title zy" data-type="ad" data-id="${ZY_QuanMianZhiLiangGuanLi_4.adId}">${ZY_QuanMianZhiLiangGuanLi_4.adTitle}</h3> 
     </div> 
     <div class="animate__animated animate__fadeInUp"> 
      <p class="em zy" data-type="ad" data-id="${ZY_XunHuan_5.adId}">${ZY_XunHuan_5.adTitle}</p> 
      <p class="zy" data-type="ad" data-id="${ZY_QuanZhiGuan_6.adId}">${ZY_QuanZhiGuan_6.adTitle}</p> 
      <p class="em mt-20 zy" data-type="ad" data-id="${ZY_ZhiLiangKongZhi_7.adId}">${ZY_ZhiLiangKongZhi_7.adTitle}</p> 
      <p class="zy" data-type="ad" data-id="${ZY_QuanZhiGuan_8.adId}">${ZY_QuanZhiGuan_8.adTitle}</p> 
      <p class="em mt-20 zy" data-type="ad" data-id="${ZY_ZhongZhiJiDi_9.adId}">${ZY_ZhongZhiJiDi_9.adTitle}</p> 
      <p class="zy" data-type="ad" data-id="${ZY_QuanZhiGuan_10.adId}">${ZY_QuanZhiGuan_10.adTitle}</p> 
      <div class="flex img-box"> 
       <img src="${img_$WMvc11.adImg}" class="img flex-1 zy" data-type="ad" data-id="${img_$WMvc11.adId}"> 
       <img src="${img_BW51e12.adImg}" class="img flex-1 zy" data-type="ad" data-id="${img_BW51e12.adId}"> 
       <img src="${img_JgJpg13.adImg}" class="img flex-1 zy" data-type="ad" data-id="${img_JgJpg13.adId}"> 
      </div> 
     </div> 
    </div> 
   </div> 
   <!-- 质量保障 --> 
   <div class="tab-content hide"> 
    <div class="quality"> 
     <div class="title-wrap"> 
      <h3 class="title animate__animated animate__fadeInUp zy" data-type="ad" data-id="${ZY_ZhiLiangGuanLi_14.adId}">${ZY_ZhiLiangGuanLi_14.adTitle}</h3> 
      <h4 class="sub-title animate__animated animate__fadeInUp zy" data-type="ad" data-id="${ZY_QuanMianZhiLiangGuanLi_15.adId}">${ZY_QuanMianZhiLiangGuanLi_15.adTitle}</h4> 
     </div>
     <cms:ad var="images" code="quality_images"></cms:ad>
     <c:if test="${not empty images}">
     <div class="quality-wrap"> 
      <div class="swiper-container">
       <div class="swiper-wrapper">
        <c:forEach items="${images }" var="item">
         <div class="swiper-slide">
          <img src="${item.adImg}" class="img zy" data-type="ad" data-id="${item.adId}" />
         </div>
        </c:forEach>
       </div> 
      </div> 
      <div class="swiper-button-next"></div> 
      <div class="swiper-button-prev"></div> 
     </div>
     </c:if>
    </div> 
   </div> 
   <!-- 研发与知识产权 --> 
<%--   <div class="tab-content hide"> --%>
<%--    <div class="common-box"> --%>
<%--     <div class="animate__animated animate__fadeInUp"> --%>
<%--      <h3 class="title zy" data-type="ad" data-id="${ZY_YanFaYuZhiShiChan_20.adId}">${ZY_YanFaYuZhiShiChan_20.adTitle}</h3> --%>
<%--     </div> --%>
<%--     <div>--%>
<%--      <cms:arts var="artList" code="zscq" pageNow="${param.pageNow == null ? 0 : param.pageNow }" pageSize="10"></cms:arts>--%>
<%--      <c:forEach items="${artList }" var="item" >--%>
<%--       <div class="list-item flex">--%>
<%--        <img src="${item.artImage}" class="zy">--%>
<%--        <div>--%>
<%--         <p class="zy" >${item.artAbstract}</p>--%>
<%--        </div>--%>
<%--       </div>--%>
<%--      </c:forEach>--%>
<%--     </div>--%>
<%--    </div> --%>
<%--   </div> --%>
  </div> 
  <jsp:include page="_footer.jsp"></jsp:include>  
  <script src="https://hwfile.csxuncong.com/wantai/pc/js/swiper.min.js"></script>
  <script>
         window.onload = function(){
            function init(){
                var swiper = new Swiper('.swiper-container', {
                    speed:1000,
                    loop:true,
                    
                    spaceBetween: 20,
                    slidesPerView: 8,
                    prevButton:'.swiper-button-prev',
                    nextButton:'.swiper-button-next'
                });
            }

            var itemEls = document.getElementsByClassName('tab-item');
            var contentEls = document.getElementsByClassName('tab-content');
            var type = getQueryVariable('type') || 0;
            tabChange(type)
            
            for(var i= 0; i < itemEls.length;i++){
                let index = i;
                itemEls[i].onclick = tabChange.bind(this, index)
            }

            function tabChange(index){
                for(var i= 0; i < itemEls.length;i++){
                    itemEls[i].className="tab-item";
                    contentEls[i].className="tab-content hide";
                }
                itemEls[index].className="tab-item active";
                contentEls[index].className="tab-content";
                if(index == 1){
                    init()
                }
            }
            function getQueryVariable(variable)
            {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                        var pair = vars[i].split("=");
                        if(pair[0] == variable){return pair[1];}
                }
                return(false);
            }
         }
    </script> 
 </body>
</html>